<template>
  <div class="editPwd-view">
    <div class="reset-box">
      <div class="title">修改密码</div>
      <el-form ref="resetRef" :model="resetObj.formData" :rules="resetObj.rules">
        <el-form-item label="" prop="oldPassword">
          <el-input
            v-model="resetObj.formData.oldPassword"
            placeholder="请输入旧密码"
            type="password"
            clearable
            show-password
          >
            <template #prefix>
              <i class="iconfont icon-mima"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="newPassword">
          <el-input
            v-model="resetObj.formData.newPassword"
            placeholder="请输入新密码"
            type="password"
            clearable
            show-password
          >
            <template #prefix>
              <i class="iconfont icon-mima"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="" prop="confirmPassword">
          <el-input
            v-model="resetObj.formData.confirmPassword"
            placeholder="请确认新密码"
            type="text"
            clearable
            show-password
          >
            <template #prefix>
              <i class="iconfont icon-mima"></i>
            </template>
          </el-input>
        </el-form-item>
        <div class="submit-btn" @click="save()">保存</div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance, FormRules } from 'element-plus'
import { editPwd } from './api'
import { useProxy } from '@/utils/proxy'
import cache from '@/plugins/cache'
import { removeToken } from '@/utils/auth'
import { getSystemParams } from '@/utils/config'
import useUserStore from '@/store/modules/user'
const validatorPsd = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error('请输入确认密码'))
  } else if (resetObj.formData.newPassword && value != resetObj.formData.newPassword) {
    callback(new Error('确认密码和新密码不一致！请重新输入'))
  } else if (value && !resetObj.formData.newPassword) {
    callback(new Error('请先输入新密码'))
  } else {
    callback()
  }
}
const validPwd = async (rule: any, value: any, callback: any) => {
  if (!value) return callback()
  if (resetObj.pwdLength && value.length < Number(resetObj.pwdLength)) {
    return callback(new Error(`密码长度至少${resetObj.pwdLength}位`))
  }
  if (resetObj.isValidPwd == '0') return callback()
  let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@ #$%^&*()_+`\-={}:";'<>?,./]).{3,64}$/
  if (!reg.test(value)) {
    callback(new Error('密码必须包含英文、数字、特殊符号'))
  } else {
    callback()
  }
}
const { proxy } = useProxy()
const userStore = useUserStore()
const resetRef = ref<FormInstance>()
const resetObj = reactive({
  isSubmiting: false,
  isValidPwd: getSystemParams('003'),
  pwdLength: getSystemParams('002'),
  formData: { oldPassword: '', newPassword: '', confirmPassword: '' },
  rules: {
    oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
    newPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }, { validator: validPwd }],
    confirmPassword: [{ validator: validatorPsd, trigger: 'blur' }]
  } as FormRules
})
// 保存
const save = async () => {
  await resetRef.value?.validate(async (valid) => {
    if (valid) {
      if (resetObj.isSubmiting) return
      resetObj.isSubmiting = true
      const { oldPassword, newPassword } = resetObj.formData as any
      editPwd({ oldPassword, newPassword })
        .then(() => {
          proxy.$message.msgSuccess('修改成功,请重新登录')
          resetObj.isSubmiting = false
          cache.local.remove('debtUserInfo')
          cache.local.remove('menuRoutes')
          removeToken()
          setTimeout(() => {
            proxy.$router.replace('/login')
          }, 700)
        })
        .catch(() => {
          resetObj.isSubmiting = false
        })
    }
  })
}
</script>

<style lang="scss" scoped>
.editPwd-view {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
  .reset-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 382px;
    height: 400px;
    background: #ffffff;
    box-shadow: 0px 0px 29px 1px rgba(99, 140, 236, 0.16);
    border-radius: 11px 11px 11px 11px;
    padding: 45px;
    box-sizing: border-box;
    .title {
      font-size: 22px;
      font-weight: bold;
      color: #333333;
      margin-bottom: 45px;
    }

    .submit-btn {
      width: 100%;
      height: 43px;
      background-color: $blue;
      text-align: center;
      line-height: 43px;
      letter-spacing: 12px;
      border-radius: 4px 4px 4px 4px;
      font-size: 18px;
      color: #ffffff;
      cursor: pointer;
      margin: 34px auto 0px;
    }
    .iconfont {
      font-size: 20px;
      color: #666;
    }
    :deep(.el-form-item) {
      margin-bottom: 20px;
      position: relative;
      border-radius: 0;
    }
    :deep(.el-form-item.is-error .el-input__wrapper) {
      box-shadow: none;
      border-bottom: 1px solid #e60012;
      border-radius: 0;
    }
    :deep(.el-form-item__error) {
      padding-left: 44px;
      padding-top: 6px;
    }
    :deep(.el-input__wrapper, .el-input__wrapper.hover, .el-input__wrapper.is-focus) {
      border: none;
      border-radius: 0;
      border-bottom: 1px solid #ccc;
      box-shadow: none;
    }
    :deep(.el-input__inner) {
      padding-left: 4px;
      border-radius: 0;
    }
  }
}
</style>
